<template>
  <!-- 我是退出登录和切换用户 -->
  <div id="logout-container">
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        {{ usertype ? `普通用户` : `交管用户` }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item class="nowName" disabled>
          <img src="img/用户.png" alt="" />
          {{ userName }}
        </el-dropdown-item>
        <el-dropdown-item @click.native="logOut">
          <img src="img/退出.png" alt="" />
          退出登录
        </el-dropdown-item>
        <el-dropdown-item @click.native="changepwd">
          <img src="img/修改密码.png" alt="" />
          修改密码
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Logout',
  computed: mapState(['usertype', 'userName']),
  methods: {
    logOut() {
      this.$confirm('点击确定将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http
            .put(`/online?username=${this.userName}&online=0`)
            .then(res => {
              if (res.code == 0) {
                window.localStorage.setItem('token', '')
                this.$router.push('/login')
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登录',
          })
        })
    },
    changepwd() {
      // 进入修改密码路由
      this.$router.push('/changepwd')
    },
  },
}
</script>

<style scoped>
#logout-container {
  height: 100%;
  width: 10%;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-dropdown {
  z-index: 11;
  border-radius: 10px;
  /* border: none; */
  border-bottom: 2px solid white;
  height: 45%;
  width: 70%;
  min-width: 140px;
  font-size: 16px;
  font-weight: 500;
  background-color: rgba(248, 248, 132, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown:hover {
  cursor: pointer;
  font-weight: 900;
  background-color: antiquewhite;
  color: darkcyan;
  box-shadow: 1px 1px 0px 0px;
  transition: all 0.2s ease-in-out;
}
.nowName {
  color: crimson;
  font-weight: 700;
}
</style>
